<template>
    <div>
        <el-form :inline="true" :model="search">
            <el-form-item label="字典名称:">
                <el-input prefix-icon="el-icon-search" v-model="search.name" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="loadData()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="2" :offset="0">
                <el-button type="primary" plain @click="dialogVisible = true" icon="el-icon-plus" size="medium">新增</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="code" border v-loading="tableLoading">
            <el-table-column prop="name" label="字典名字">
            </el-table-column>

            <el-table-column label="字典类型">
                <template slot-scope="scope">
                    <el-link type="primary" @click="openDicItem(scope.row)">{{ scope.row.code }}</el-link>
                </template>
            </el-table-column>

            <el-table-column prop="remark" label="备注">
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="190">
                <template slot-scope="scope">
                    <el-button @click="editHandleClick(scope.row)" size="mini" plain icon="el-icon-edit">编辑</el-button>

                    <el-popconfirm style="margin-left: 10px;" title="是否确认删除？" confirmButtonText="确认" cancelButtonText="取消"
                        confirmButtonType="danger" cancelButtonType="text" @confirm="deleteHandleClick(scope.row)">
                        <el-button slot="reference" size="mini" type="danger" plain icon="el-icon-delete">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="search.currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="search.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>

        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="30%"
            @close="dialogClosed">
            <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal" v-loading="formLoad">
                <el-form-item label="字典名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="字典类型">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2}"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
            title="字典项"
            :visible.sync="itemVisible"
            width="40%"
            >
            <itemIndex :dicId="dicId" :dicCode="dicCode" :key="dicItemRenderKey"></itemIndex>
            <span slot="footer">
                <el-button type="primary" @click="itemVisible = false">关闭</el-button>
            </span>
        </el-dialog>
        
        

</div>
</template>

<script>
import { getPage,insert } from "@/api/system/dictionary";
import itemIndex from "@/components/itemIndex.vue"

export default {
    created(){
        this.loadData();
    },
    components:{
        itemIndex
    },
    data() {
        return {
            formLoad:false,
            tableData: [],
            search: {
                name: '',
                currentPage:1,
                pageSize:10
            },
            form:{
                id:'',
                name:'',
                code:'',
                remark:''
            },
            totalCount:0,
            dialogVisible:false,
            dialogTitle:'新增字典',
            tableLoading:true,
            dicId:'',
            dicCode:'',
            itemVisible:false,
            dicItemRenderKey:0
        }
    },
    methods: {
        async loadData() {
            let param = {
                pageNum:this.search.currentPage,
                pageSize:this.search.pageSize,
                name:this.search.name
            }
            this.tableLoading = true
            let result = await getPage(param)
            if(result.code==10000){
                let {data} = result
                this.totalCount = data.count
                this.tableData = data.data
            }
            this.tableLoading = false
        },
        editHandleClick(row) {
            console.log(row);
        },
        deleteHandleClick(row) {
            console.log(row);
        },
        async onSubmit(){
            this.formLoad = true
            let result = await insert(this.form)
            if(result.code == 10000){
                this.$message({
                    message:"新增成功",
                    type:'success'
                })
                this.dialogVisible = false
                this.loadData()
            }else{
                this.$message({
                    message:result.msg,
                    type:'error'
                })
            }
            this.formLoad = false
        },
        dialogClosed(){
            this.form = {
                id:'',
                name:'',
                code:'',
                remark:''
            }
        },
        handleSizeChange(size){
            this.search.pageSize = size
            this.loadData()
        },
        handleCurrentChange(page){
            this.search.currentPage = page
            this.loadData()
        },
        openDicItem(row){
            this.dicItemRenderKey +=1
            this.dicId = row.id
            this.dicCode = row.code
            this.itemVisible = true;
        }
    }
}
</script>

<style  scoped></style>